<template>
    <div
        class="generation-picker mt-[15px] px-[15px]"
        v-show="drawModel.is_open"
    >
        <div class="flex bg-page-base rounded-lg cursor-pointer">
            <swiper class="!mx-0" :slidesPerView="'auto'" :spaceBetween="16" @swiper="onSwiper">
                <swiper-slide
                    v-for="(item, index) in drawModel.modelList"
                    :key="item.id"
                    style="width: auto"
                >
                    <div
                        class="tabs-item px-[5px] py-[16px]"
                        :class="{
                            'tabs-item__active':
                                item.model == drawModel.current.model
                        }"
                        @click="handleClick(index)"
                    >
                        {{ item.name }}
                    </div>
                </swiper-slide>
            </swiper>
            <div
                class="flex justify-center items-center w-[80px] flex-none ml-auto text-tx-regular hover:!text-primary"
                style="box-shadow: -3px 0 6px #0000000f"
                @click="isUnfold = true"
            >
                <span class="text-sm">更多</span>
                <icon
                    name="el-icon-CaretBottom"
                    size="16"
                    color="inherit"
                ></icon>
            </div>
        </div>
        <template v-if="isUnfold">
            <div class="draw-tabs__mask" @click="isUnfold = false"></div>
            <div
                class="draw-tabs flex flex-wrap p-[10px] bg-page-base rounded-lg cursor-pointer"
                @click="isUnfold = false"
            >
                <div
                    v-for="(item, index) in drawModel.modelList"
                    :key="item.id"
                    class="tabs-item inline-block px-[10px] py-[16px] hover:bg-page-base rounded-lg text-center w-1/2"
                    :class="{
                        'tabs-item__active':
                            item.model == drawModel.current.model
                    }"
                    @click="handleClick(index)"
                >
                    {{ item.name }}
                </div>
            </div>
        </template>
    </div>
</template>
<script setup lang="ts">
import { drawingModel } from '~/api/drawing'
import { useUserStore } from '~/stores/user'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import { Swiper as SwiperInstance } from 'swiper'

const emit = defineEmits<{
    (event: 'update:modelValue', value: string): void
    (event: 'update:model', value: any): void
}>()
const props = withDefaults(
    defineProps<{
        balance?: any
        modelValue?: any
    }>(),
    {
        balance: 0,
        modelValue: ''
    }
)

const userStore = useUserStore()

// 是否展开
const isUnfold = ref(false)
// 绘画模型
const drawModel = reactive({
    is_open: 0,
    current: {
        balance: 1,
        name: '',
        model: ''
    } as any,
    modelList: [] as any[]
})

watch(
    () => props.modelValue,
    (value) => {
        let index = drawModel.modelList.findIndex((item: any) => {
            return item.model === value
        })
        drawModel.current = drawModel.modelList[index]
        // 跳转swiper到指定位置
        swiperInstance.value?.slideTo(--index, 1000, false)
    },
    { immediate: false }
)

const swiperInstance = shallowRef<SwiperInstance>()
const onSwiper = (swiper: SwiperInstance) => {
    swiperInstance.value = swiper
    console.log(swiper)
}

// 获取绘画模型数据
const getDrawModel = async () => {
    try {
        const { is_open, lists } = await drawingModel()
        drawModel.is_open = is_open
        drawModel.modelList = lists
        drawModel.current = lists.find((item: any) => item.default) || lists[0]
        let defaultIndex = lists.findIndex((item: any) => item.default) || 1
        emit('update:model', drawModel.current)
        emit('update:modelValue', drawModel.current.model)
        // 初始化时跳转swiper到指定位置
        await nextTick()
        swiperInstance.value?.slideTo(--defaultIndex, 1000, false)
    } catch (error) {
        console.log('获取绘画模型失败=>', error)
    }
}

const handleClick = (index: number) => {
    drawModel.current = drawModel.modelList[index]
    emit('update:model', drawModel.current)
    emit('update:modelValue', drawModel.current.model)

    // 点击时跳转swiper到指定位置
    swiperInstance.value.slideTo(--index, 1000, false)
}

watch(
    () => userStore?.userInfo?.is_draw_limit,
    () => {
        getDrawModel()
    }
)

getDrawModel()
</script>

<style lang="scss" scoped>
.generation-picker {
    position: relative;

    .draw-tabs__mask {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 9;
    }
    .draw-tabs {
        position: absolute;
        top: 0;
        left: 15px;
        width: 320px;
        z-index: 10;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        @apply bg-white;
    }

    .swiper-slide {
        margin-right: 10px !important;
    }
    .swiper-slide:first-child .tabs-item {
        padding-left: 15px;
    }
    .swiper-slide:last-child .tabs-item {
        padding-right: 15px;
    }
    .tabs-item {
        position: relative;
        @apply text-lg text-tx-regular;
    }
    .tabs-item__active {
        @apply text-[#101010] font-medium;
        &::after {
            content: '';
            position: absolute;
            transform: translateX(-50%);
            left: 50%;
            width: 40%;
            height: 3px;
            bottom: 10px;
            border-radius: 2px;
            background-color: var(--el-color-primary);
        }
    }
}
</style>
